<template>
  <footer class="footer">
    <span class="todo-count">
      剩余<strong>{{ leftCount }}</strong>
    </span>
    <ul class="filters">
      <li>
        <a @click="changeStatus('all')" :class="{ selected: status === 'all' }" href="javascript:;">全部</a>
      </li>
      <li>
        <a @click="changeStatus('active')" :class="{ selected: status === 'active' }" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="changeStatus('completed')" :class="{ selected: status === 'completed' }" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearDone()">清除已完成</button>
  </footer>
</template>

<script setup lang="ts">
import todosStore from '@/stores/todos'
import { toRefs } from 'vue-demi'
const todos = todosStore()

const { clearDone, leftCount, status, changeStatus } = toRefs(todos)
</script>
